<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="640px,initial-scale=0.5,maximum-scale=1,user-scalable=no" />
	<!-- 兼容IE，chrome=1试用的前提是必须安装了chrome浏览器 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<!-- 兼容国内浏览器，直接采用高速模式渲染页面 -->
	<meta name="renderer" content="webkit">
	<title>纯css3写iphon7模型</title>
	<link rel="stylesheet" href="./swiper-bundle.min.css">
	<link rel="stylesheet" href="style.css">
</head>

<body style="transform: scale(0.46); margin-top: -500px;">
	<div style="text-align:center;font-size:60px">home键可点击</div>
	<div class="wrap">
		<div class="front">
			<div class="mute"></div>
			<div class="volume">
				<span></span>
				<span></span>
			</div>
			<div class="onoff"></div>
			<div class="front-bg">
				<div class="speaker">
					<div class="camera"><span></span></div>
				</div>
				<div class="home"><span></span></div>
				<!-- 屏幕 -->
				<!-- 熄屏状态 -->
				<div class="putout"></div>

				<div class="screen">
					<!-- 状态栏 -->
					<div class="status-bar">
						<div class="status-left"><span class="signal"></span>中国移动</div>
						<span class="lock"></span>
						<span class="tatus-time">15:45</span>
						<div class="battery">
							90%
							<div>
								<span></span>
								<span></span>
							</div>
						</div>
					</div>
					<!-- 锁屏状态 -->
					<div class="lock-statu">

						<!-- 时间 -->
						<div class="times">
							<div class="time"></div>
							<div class="date"></div>
						</div>
						<div class="footer">
							<div class="text">按下主屏幕按钮以解锁</div>
							<div class="camera-lock"><span></span><span></span></div>
						</div>
					</div>
					<div class="unlock">

						<!-- 图标内容 -->
						<div class="content swiper-container">
							<div class="swiper-wrapper">
								<ul class="swiper-slide">
									<li>
										<a class="icon">
											<div class="qq">
												<div class="head">
													<span class="eye"></span>
													<span class="eye"></span>
													<span class="zui"></span>
												</div>
												<div class="weijin"><span></span></div>
												<div class="wing"></div>
												<div class="body"><span></span></div>
												<div class="foot"></div>
											</div>
										</a>
										<div class="name">QQ</div>
									</li>
									<li>
										<a class="icon">
											<div class="wechat">
												<span class="big">
													<span></span>
												</span>
												<span class="small">
													<span></span>
												</span>
											</div>
										</a>
										<div class="name">微信</div>
									</li>
									<li>
										<a class="icon">
											<div class="keep">
												<span></span>
											</div>
										</a>
										<div class="name">Keep</div>
									</li>
									<li>
										<a class="icon">
											<div class="ithome">
												<span><em></em></span>
											</div>
										</a>
										<div class="name">IT之家</div>
									</li>
									<li>
										<a class="icon">
											<div class="duokan"><span></span></div>
										</a>
										<div class="name">多看阅读</div>
									</li>
									<li>
										<div class="mes-tips">6</div>
										<a class="icon">
											<div class="ico-tips">
												<span><em></em></span>
												<span></span>
												<span></span>
											</div>
										</a>
										<div class="name">提示</div>
									</li>
									<li>
										<a class="icon">
											<div class="weather">
												<div> <span></span></div>
											</div>
										</a>
										<div class="name">天气</div>
									</li>

									<li>
										<a class="icon">
											<div class="clock">
												<div class="clockinfo">
													<div id="number">
														<div><span>12</span></div>
														<div><span>1</span></div>
														<div><span>2</span></div>
														<div><span>3</span></div>
														<div><span>4</span></div>
														<div><span>5</span></div>
														<div><span>6</span></div>
														<div><span>7</span></div>
														<div><span>8</span></div>
														<div><span>9</span></div>
														<div><span>10</span></div>
														<div><span>11</span></div>
													</div>
													<div id="houre"></div>
													<div id="minute"></div>
													<div id="second"></div>
												</div>
											</div>
										</a>
										<div class="name">时钟</div>
									</li>
									<li>
										<a class="icon">
											<div class="calendar">
												<span class="ico-week">星期四</span>
												<span class="ico-day">4</span>
											</div>
										</a>
										<div class="name">日历</div>
									</li>
									<li>
										<a class="icon">
											<div class="ico-facebook">
												<span><em></em></span>
												<b></b>
											</div>
										</a>
										<div class="name">Facebook</div>
									</li>
									<li>
										<a class="icon">
											<div class="ico-youtube"><span></span></div>
										</a>
										<div class="name">YouTube</div>
									</li>
									<li>
										<a class="icon">
											<div class="ico-chrome">
												<div></div>
											</div>
										</a>
										<div class="name">Chrome</div>
									</li>
									<li>
										<div class="mes-tips">1</div>
										<a class="icon">
											<div class="ico-amap">
												<span></span>
												<div class="feiji">
													<em></em>
													<em></em>
												</div>
											</div>
										</a>
										<div class="name">高德地图</div>
									</li>
									<li>
										<a class="icon">
											<div class="ico-ele">
												<div><span></span></div>
											</div>
										</a>
										<div class="name">饿了吗</div>
									</li>
									<li>
										<a class="icon">
											<div class="ico-mistore">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
											</div>
										</a>
										<div class="name">小米商城</div>
									</li>
									<li>
										<div class="mes-tips">6</div>
										<a class="icon">
											<div class="ico-didi">
												<span><em></em></span>
											</div>
										</a>
										<div class="name">滴滴出行</div>
									</li>
									<li>
										<a class="icon">
											<div class="ico-ofo">
												<div><span><em></em></span></div>
											</div>
										</a>
										<div class="name">ofo共享单车</div>
									</li>
									<!-- Authenticator -->
									<li>
										<a class="icon">
											<div class="ico-authenticator">
												<div><span><em></em></span></div>
											</div>
										</a>
										<div class="name">Authenticator</div>
									</li>
									<!-- word -->
									<li>
										<a class="icon">
											<div class="ico-word">
												<span></span>
												<span></span>
											</div>
										</a>
										<div class="name">Word</div>
									</li>
								</ul>
								<ul class="swiper-slide">
									<li>
										<a class="icon">
											<div class="ico-gcloud">
												<span></span>
												<span></span>
												<span></span>
											</div>
										</a>
										<div class="name">云端硬盘</div>
									</li>
									<!-- FaceTime -->
									<li>
										<a class="icon">
											<div class="ico-facetime">
												<span><em></em></span>
											</div>
										</a>
										<div class="name">FaceTime</div>
									</li>
									<!-- 提醒事项 -->
									<li>
										<a class="icon">
											<div class="ico-dooo">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
											</div>
										</a>
										<div class="name">提醒事项</div>
									</li>
									<!-- 备忘录 -->
									<li>
										<a class="icon">
											<div class="ico-note">
												<span></span>
											</div>
										</a>
										<div class="name">备忘录</div>
									</li>
									<!-- 计算器 -->
									<li>
										<a class="icon">
											<div class="ico-calc">
												<span></span>
												<span></span>
												<span></span>
												<span></span>
											</div>
										</a>
										<div class="name">计算器</div>
									</li>
								</ul>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						</div>
						<div class="dock-bar">
							<div class="glassbg"></div>
							<ul>
								<li>
									<a class="icon">
										<div class="phone">
											<div>
												<span></span>
												<span></span>
											</div>

										</div>
									</a>
									<div class="name">电话</div>
								</li>
								<li>
									<a class="icon">
										<div class="ico-camera">
											<div><span></span><span></span><span></span></div>
										</div>
									</a>
									<div class="name">相机</div>
								</li>
								<li>
									<a class="icon">
										<div class="email">
											<div></div>
										</div>
									</a>
									<div class="name">邮件</div>
								</li>
								<li>
									<a class="icon">
										<div class="message">
											<span></span>
										</div>
									</a>
									<div class="name">短信</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tips-text" style="font-size: 40px;">纯css3写的iphone手机模板,<br>ps:图标不清晰是因为尺寸是按照iphone1:1的比例开发，如果1：1显示 会超出屏幕，所以使用transform: scale 进行了缩放
		</div>


	<script src='./jquery.min.js'></script>
	<script src="./swiper-bundle.min.js"> </script>
	<script>
		// 获取日期
		var myDate = new Date()
		var week = "日一二三四五六";
		var aweek = week.split('')
		var oH = myDate.getHours();
		var oM = myDate.getMinutes();
		var oS = myDate.getSeconds();
		var oMon = myDate.getMonth() + 1;
		var oDay = myDate.getDate();
		var i = myDate.getDay();
		if (oM < 10) {
			omi = "0" + oM
		} else {
			omi = myDate.getMinutes();
		}
		$('.times .time').html(oH + '<i></i>' + omi);
		$('.times .date').html(oMon + '月' + oDay + '日' + '&nbsp星期' + aweek[i]);

		$('.tatus-time').text(oH + ":" + omi)

		$('.ico-week').text('星期' + aweek[i])
		$('.ico-day').text(oDay)
		var swiper = new Swiper('.swiper-container', {
			pagination: '.swiper-pagination',
		});


		$('.home span').on('click', function () {


			if ($('.putout').css('display') === 'block') {
				$('.putout').hide();
			} else {
				$('.lock-statu,.content,.dock-bar,.swiper-pagination,.screen .lock,.screen .tatus-time').addClass(
					'act');
				setTimeout(function () {
					$('.lock-statu').hide();
				}, 500)
			}
		})



		// 时钟
		function colornum() {
			var oHoure = document.getElementById("houre");
			var oMinute = document.getElementById("minute");
			var oSecond = document.getElementById("second");

			var nowTime = new Date();
			var nowHoure = nowTime.getHours();
			var nowMinute = nowTime.getMinutes();
			var nowSecond = nowTime.getSeconds();
			var houreDeg = (nowMinute / 60) * 30;
			var minuteDeg = (nowSecond / 60) * 6;
			oHoure.style.WebkitTransform = "rotate(" + (nowHoure * 30 + houreDeg) + "deg)";
			oMinute.style.WebkitTransform = "rotate(" + (nowMinute * 6 + minuteDeg) + "deg)";
			oSecond.style.WebkitTransform = "rotate(" + (nowSecond * 6) + "deg)";
		}
		colornum();
		setInterval(colornum, 1000);

		$('.onoff').on('click', function () {
			$('.lock-statu,.content,.dock-bar,.swiper-pagination,.screen .lock,.screen .tatus-time').removeClass(
				'act');
			$('.lock-statu').show();
			$('.putout').show()
		})
	</script>
</body>

</html>